import React, { Component } from 'react';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

class EchartsTest extends Component {
    state = {
        student: [],
        d: [],
    }
    componentDidMount() {
        const { student } = this.state
        //数据请求
        this.$httpReq(this.$api.getStudentList(), res => {
            const { code, data } = res;
            if (code) {
                this.setState({ student: data.studentData })
                this.$httpReq(this.$api.getSchoolList(), res => {
                    const { code, data } = res;
                    if (code) {
                        let arr = []
                        data.forEach(item => {

                            // console.log(item)
                            let b = this.state.student.filter(j => j.school === item.schoolid)

                            let obj = {
                                value: b.length,
                                name: item.schoolid
                            }
                            arr.push(obj)
                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('main'));
                            // 绘制图表
                            myChart.setOption({
                                title: {
                                    text: '各学院学生占比',
                                    subtext: '',
                                    left: '0px'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data: []
                                },

                                series: [
                                    {
                                        name: '各学院学生占比',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: arr,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            });

                        })
                    }
                })
            }


        })






    }
    render() {
        return (
            <div id="main" style={{ width: 730, height: 400, marginTop: '20px' }}></div>
        );
    }
}

export default EchartsTest;